<template>
  <div class="executor">
    <div v-if="list.length" class="executor-list mb-20">
      <div v-for="(item, index) in list" :key="index" class="executor-item relative">
        <img
          v-if="!isView && !editPerson && (isHigh || !isLock || !item.id)"
          src="@/assets/icons/close.png"
          class="absolute right-10 top-20 cursor-pointer"
          @click="methods.handleDelete(index)"
        />
        <n-form-item
          label="执行人"
          :path="`${pathKey}[${index}].executor`"
          :rule="[{ required: true, message: '请选择执行人！' }]"
        >
          <AsyncSelect
            v-model:value="item.executor"
            :options="methods.getUserOptions"
            label-key="personName"
            value-key="personId"
            :disabled="(editModule && Boolean(item.id)) || isView || editPerson"
          />
        </n-form-item>
        <n-form-item
          label="执行范围"
          :path="`${pathKey}[${index}].executionScope`"
          :rule="[{ required: true, message: '请输入执行范围！' }]"
        >
          <n-input
            v-model:value="item.executionScope"
            clearable
            :maxlength="50"
            :disabled="isView || editPerson || (isLock && !isHigh && item.id)"
          />
        </n-form-item>
        <n-form-item
          label="评估"
          :path="`${pathKey}[${index}].duration`"
          :rule="[{ required: true, message: '请输入评估！' }]"
        >
          <n-input-number
            v-model:value="item.duration"
            :min="0"
            :max="1000"
            clearable
            :disabled="isView || editPerson || (isLock && !isHigh && item.id)"
          />
        </n-form-item>
        <n-form-item
          label="时间范围"
          :path="`${pathKey}[${index}].timeRange`"
          :rule="[{ required: true, message: '请选择时间范围！' }]"
        >
          <n-date-picker
            v-model:formatted-value="item.timeRange"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm"
            :time-picker-props="{ format: 'HH:mm' }"
            :default-time="['09:00:00', '18:30:00']"
            clearable
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :disabled="isView || editPerson || (isLock && !isHigh && item.id)"
            @update:value="(_, range) => methods.onChangeRange(index, range)"
          />
        </n-form-item>
        <n-form-item
          label="优先级"
          :path="`${pathKey}[${index}].priorityId`"
          :rule="{ required: true, message: '请选择优先级' }"
        >
          <AsyncSelect
            v-model:value="item.priorityId"
            dict-value-key="dictId"
            options="EXECUTE_TASK_PRIORITY"
            :disabled="isView || editPerson || (isLock && !isHigh && item.id)"
          />
        </n-form-item>
        <n-form-item label="任务备注" :path="`${pathKey}[${index}].taskNotes`">
          <n-input
            v-model:value="item.taskNotes"
            clearable
            :maxlength="300"
            show-count
            type="textarea"
            :autosize="{
              minRows: 3,
            }"
            :disabled="isView || (isLock && !isHigh && item.id && editModule) || scene === 'all'"
          />
        </n-form-item>
        <n-form-item
          label="任务状态"
          :path="`${pathKey}[${index}].taskState`"
          :rule="{ required: true, message: '请选择任务状态' }"
        >
          <AsyncSelect
            v-model:value="item.taskState"
            :options="state.statusOptions"
            :disabled="isView || (isLock && !isHigh && item.id && editModule)"
          />
        </n-form-item>
      </div>
    </div>
    <n-button
      v-if="type === 'module'"
      ghost
      type="primary"
      size="small"
      :disabled="isView || tongan"
      @click="methods.handleAdd"
    >
      <i class="i-material-symbols:add mr-4 text-18" />
      添加
    </n-button>
  </div>
</template>
<script setup lang="jsx">
import { useWorkday } from '@/hooks/useWorkday'
import * as projectApi from '@/api/project'
import { useUserStore } from '@/store'
defineOptions({ name: 'Executor' })
const props = defineProps({
  pathKey: {
    type: String,
    default: 'projectTaskExeDto',
  },
  // type: person module
  type: {
    type: String,
    default: '',
  },
  // action: add view edit delete
  action: {
    type: String,
    default: '',
  },
  tongan: {
    type: Boolean,
    default: false,
  },
  projectId: {
    type: String,
    default: '',
  },
  isLock: {
    type: Boolean,
    default: false,
  },
  scene: {
    type: String,
    default: 'all',
  },
})
const list = defineModel({
  type: Array,
  default: () => [],
})
const { getRealDuration } = useWorkday(true)
const state = reactive({
  statusOptions: [
    { label: '未开始', value: 0 },
    { label: '进行中', value: 1 },
    { label: '已完成', value: 2 },
  ],
})
const { isHigh } = useUserStore()
const isView = computed(() => props.action === 'view')
const editModule = computed(() => props.type === 'module' && props.action === 'edit')
const editPerson = computed(() => props.type === 'person' && props.action === 'edit')
// const commonDisabled = computed(() => props.action === 'view' && props.is)
const methods = reactive({
  getUserOptions() {
    return projectApi.devPersonList({ projectId: props.projectId }).then((res) => res.data)
  },
  executorMold() {
    return {
      executor: null,
      executionScope: null,
      duration: null,
      timeRange: null,
      priorityId: null,
      taskNotes: null,
      taskState: null,
    }
  },
  handleAdd() {
    list.value.push(methods.executorMold())
  },
  handleDelete(index) {
    list.value.splice(index, 1)
  },
  onChangeRange(index, range) {
    list.value[index].actualDuration = getRealDuration(...range)
  },
})
</script>
<style lang="scss" scoped>
.executor-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  .executor-item {
    box-sizing: border-box;
    padding: 20px 40px 10px 0;
    background: #f4f5f7;
  }
}
</style>
